<template>
	<view style="height:auto;width: 100%;background: #fff;min-height: 100vh;float: left;overflow-x: hidden;">
		<view class="top">
			<!-- <view class="top_adr" @click="dingwei()">
				<image src="../../static/img/adrs.png" mode="widthFix"></image><text class="t1"
					style="display: -webkit-box;">{{adrname}}</text>
			</view> -->
			<input type="text" class="top_inp" v-model="tiaojian" placeholder-class="t8" placeholder="搜索"
				@confirm="searchs()" />
			<view class="top_kefu" @click="shai()">
				<image src="../../static/img/shai.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="shai">
			<view :class="['shai_li',jlshow==true&&flshow==false?'t12':'t1']" @click="juli()">{{julim}}</view>
			<view :class="['shai_li',flshow==true&&jlshow==false?'t12':'t1']" @click="fenlei()">{{fenlm}}</view>
			<view class="shai_li t1" @click="adrs()">{{adrname}}</view>
		</view>
		<view class="float" v-if="jlshow">
			<view :class="['float_li',jul==''?'li_a':'']" @click="juliact()">不限</view>
			<view :class="['float_li',jul==1?'li_a':'']" @click="juliact(1)">1km</view>
			<view :class="['float_li',jul==5?'li_a':'']" @click="juliact(5)">5km</view>
			<view :class="['float_li',jul==10?'li_a':'']" @click="juliact(10)">10km</view>
			<view :class="['float_li',jul==15?'li_a':'']" @click="juliact(15)">15km</view>
		</view>
		<view class="float_nav" v-if="flshow">
			<view :class="['float_nav_li',fenl==100?'li_act':'']" @click="navact(100)">不限</view>
			<view :class="['float_nav_li',fenl==nindex?'li_act':'']" v-for="(item,nindex) in navlist" :key="nindex"
				@click="navact(nindex)">{{item.name}}</view>
		</view>
		<view class="float" v-if="adrshow">
			<view :class="['float_li',adri==1?'li_a':'']" @click="dqadr()">当前位置</view>
			<view :class="['float_li',adri==2?'li_a':'']" @click="dingwei()">地图定位</view>
		</view>


		<view class="bai" style="margin-bottom: 20vw;"></view>
		<view class="shop">
			<view class="msg_list" v-for="(item,sindex) in shoplists" :key="sindex" @click="shopDetail(item)">
				<view class="msg_list_img">
					<image :src="item.mainUrl" mode="aspectFill">
				</view>
				<view class="msg_list_tit t1">
					<view class="msa_list_tit_main">

						<view class="msg_list_text t1"> {{item.mchShortName}}</view>
						<image src="../../static/img/tel.png" mode="widthFix" class="msg_img" v-if="item.mobile"
							>
						</image>
						<image src="../../static/img/juli.png" mode="widthFix" class="msg_img" v-if="item.distance"
							>
						</image>

						<text class="t24" v-if="item.distance" 
							style="height: 5vw;line-height: 5vw;width: auto;float: right;margin-top: 1vw;margin-left: 2vw;">{{item.distance}}km</text>
					</view>
					<text class="msg_list_tab t24">地址：{{item.address}}</text>
				</view>
			</view>
			<view class="zanwu" v-show="jiazai" style="padding-top: 4vw;"><text class="t7">{{more}}</text></view>
			<view class="zanwu" v-show="zanwu" style="padding:4vw 0; margin-top: 30vw;">
				<image src="../../static/img/zanwu.png" mode="widthFix" style="margin-left: 35vw;"></image><text
					class="t8">{{wu}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import permision from "@/js_sdk/wa-permission/permission.js";
	export default {
		data() {
			return {
				alist: [],
				headimg: "../../static/img/logo.png",
				token: "",
				mainid: "",
				level: 99,
				type: "",
				adrname: "定位",
				latitude: "",
				longitude: "",
				tiaojian: '',
				pages: 1,
				shoplists: [],
				navlist: [],
				subNav: '',
				jiazai: false,
				more: '加载更多',
				zanwu: true,
				wu: "暂无数据",
				fenl: 100,
				fenlm: "分类",
				flshow: false,
				jlshow: false,
				adrshow: false,
				jul: 1000,
				julim: '距离',
			};
		},
		// onReady() {
		//   this.getServerData();
		// },
		onLoad(opt) {
			var _this = this;
			//#ifdef APP-PLUS
			_this.version = plus.runtime.version;
			//#endif
			if (opt.nav) {
				_this.subNav = opt.nav;
				console.log(opt);
				_this.fenlm = opt.nav;
			}
			_this.daohang();
			// 进入页面查看定位权限,提示打开定位
			//#ifdef APP-PLUS
			uni.getLocation({
				type: "wgs84",
				geocode: true,
				success: function(res) {
					// console.log(res);
					_this.adrname = res.address.poiName;
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
				},
				fail: function(e) {
					console.log(e)
					if (e.errCode == 1) {

						uni.showToast({
							title: '请打开手机定位，否则影响您的体验',
							icon: "none",
							duration: 3000,
						});
						_this.urladr();
					}
				}
			});
			//#endif
		},
		onShow() {
			var _this = this;
			uni.getStorage({
				key: "user",
				success: function(res) {
					// _this.nickname = res.data.nickName;
					_this.mainid = res.data.id;
					//#ifdef APP-PLUS
					uni.getLocation({
						type: "wgs84",
						geocode: true,
						success: function(res) {
							console.log(res);
							_this.adrname = res.address.poiName;
							_this.latitude = res.latitude;
							_this.longitude = res.longitude;

							_this.myinfo();
						},
						fail: function(e) {
							_this.myinfo();
						}
					});
					//#endif
				},
			});
		},
		methods: {
			// 清除所有条件
			shai() {
				this.jul = 1000;
				// this.latitude = '';
				// this.longitude = '';
				this.subNav = '';
				this.fenlm = '分类';
				this.julim = '距离';
				this.tiaojian = '';
					this.adrshow = false;
					this.jlshow = false;
				this.shoplist();
			},
			// 当前位置
			dqadr() {
				var _this = this;
				_this.adri = 1;
				uni.getLocation({
					type: "wgs84",
					geocode: true,
					success: function(res) {
						console.log(res);
						_this.adrname = res.address.poiName;
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						_this.adrshow = false;
						_this.shoplist();
					},
					fail: function(e) {
						_this.adrshow = false;
						_this.shoplist();
					}
				});
			},
			// 位置显示
			adrs() {
				console.log(this.adrshow)
				if (this.adrshow == true) {
					this.adrshow = false;
				} else {
					this.adrshow = true;
					this.flshow = false;
					this.jlshow = false;
				}
				console.log(this.adrshow)
			},
			// 距离点击
			juliact(e) {
				console.log(e)
				if (e) {
					this.jul = e;
					this.julim = e + 'km';
				} else {
					this.jul = 1000;
					this.julim = '距离';
				}
				this.jlshow = false;
				// this.subNav=this.navlist[e];
				this.shoplist();
			},
			// 距离显示
			juli() {
				if (this.jlshow == true) {
					this.jlshow = false;
				} else {
					this.jlshow = true;
					this.flshow = false;
					this.adrshow = false;
				}
			},
			// 分类显示
			fenlei() {
				if (this.flshow == true) {
					this.flshow = false;
				} else {
					this.flshow = true;
					this.jlshow = false;
					this.adrshow = false;
				}
			},
			// 分类点击
			navact(e) {
				console.log(e)
				this.fenl = e;
				if (e != 100) {
					this.fenlm = this.navlist[e].name;
					this.subNav = this.navlist[e].subNav;
				} else {
					this.fenlm = '分类';
					this.subNav = '';
				}
				this.flshow = false;
				this.shoplist();
			},
			// 顶部搜索
			searchs() {
				// console.log(11);
				if (!this.tiaojian) {
					uni.showToast({
						title: '请输入搜索条件',
						icon: "none",
						duration: 2000,
					});
				} else {
					// uni.pageScrollTo({
					// scrollTop: 0,
					// duration: 0
					// });
					uni.hideKeyboard(); //添加这一行代码即可
					this.shoplist();
				}
			},
			//打开外部地图
			getLocation(lat, lon) { //打开外部地图
				console.log(lat, lon);
				// uni.getLocation({
				//     success(res) {
				//         console.log('定位1',res)
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					scale: 18,
					success: function() {
						console.log('success');
					}
				})
				//     }
				// })
			},
			//导航搜索
			navs(e) {
				uni.navigateTo({
					url: '/pages/shop/shop?nav=' + e
				});
			},
			// 获取商家列表
			shoplist() {
				var _this = this;
				// alert(111);

				let datas= {
					distance: _this.jul, //	距离		false						string
					lat: _this.latitude, //		经纬度		false						string
					lon: _this.longitude, //	经纬度		false						string
					rootNav: "", //	主目录		false						string
					subNav: _this.subNav, //	二级目录		false						string
					mchName: _this.tiaojian, //	店铺名		false						string
				}
				console.log("请求参数: ",datas);
					
				uni.request({
					header: {
						"Content-Type": "application/json", //自定义请求头信息
					},
					url: getApp().globalData.url + "area/mchPageByLaLo/" + _this.pages, //仅为示例，并非真实接口地址。
					method: "POST",
					data: {
						distance: _this.jul, //	距离		false						string
						lat: _this.latitude, //		经纬度		false						string
						lon: _this.longitude, //	经纬度		false						string
						rootNav: "", //	主目录		false						string
						subNav: _this.subNav, //	二级目录		false						string
						mchName: _this.tiaojian, //	店铺名		false						string
					},
					success: (res) => {
						
						//uni.hideLoading(); //关闭加载动画

						console.log('商铺列表',res);
						if (res.data.status == "200") {
							var len = res.data.data.pages;
							if (len == _this.pages) {
								_this.more = "没有更多数据了";
								_this.jiazai = true;
								_this.zanwu = false;
								_this.ismore = false;
							} else if (len == 0) {
								// console.log(111);
								_this.more = "暂无数据";
								_this.jiazai = false;
								_this.zanwu = true;
								_this.ismore = false;
							} else {
								_this.more = "加载更多";
								_this.jiazai = true;
								_this.zanwu = false;
								_this.ismore = true;
							}
							if (_this.pages == 1) {
								_this.shoplists = res.data.data.records;
							} else {
								var list = _this.shoplists;
								for (var i = 0; i < res.data.data.records.length; i++) {
									list.push(res.data.data.records[i]);
									// console.log(res.data.data.records[i].sell);
								}
								_this.shoplists = list;
								this.$forceUpdate();
							}
						} else {
							// uni.showToast({
							// 	title: res.data.msg,
							// 	icon: 'none',
							// 	duration: 2000
							// });
						}
					},
					fail: (error) => {
						//uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: "none",
							duration: 2000,
						});
					},
				});
			},
			urladr() {
				var _this = this;
				uni.request({
					header: {
						"Content-Type": "application/json", //自定义请求头信息
					},
					url: 'https://app.bilibili.com/x/resource/ip', //仅为示例，并非真实接口地址。
					method: "GET",
					data: {},
					success: (res) => {
						// console.log(res);
						if (res.data.code == "0") {
							_this.adrname = res.data.data.city + '市';
						}
					},
				});
			},
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID);
				var strStatus;
				if (result == 1) {
					strStatus = "已获得授权";
				} else if (result == 0) {
					strStatus = "未获得授权";
					uni.showModal({
						content: "您已拒绝获取定位权限，请到设置中去打开此权限",
						showCancel: false,
					});
				} else {
					uni.showModal({
						content: "您已拒绝获取定位权限，请到设置中去打开此权限",
						showCancel: false,
					});
					// strStatus = "被永久拒绝权限"
				}
				// uni.showModal({
				// 	content: permisionID + strStatus,
				// 	showCancel: false
				// });
			},
			dingwei() {
				var that = this;
				that.adri = 2;
				that.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION");
				uni.chooseLocation({
					success: function(res) {

						// console.log(res);
						// console.log("位置名称：" + res.name);
						// console.log("位置名称：" + res.city);
						// console.log("详细地址：" + res.address);
						// console.log("纬度：" + res.latitude);
						// console.log("经度：" + res.longitude);
						that.adrname = res.name;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.adrshow = false;
						that.shoplist();
					},
					fail: function(res) {
						that.adrshow = false;
						that.shoplist();
					}
				});
			},
			myinfo() {
				var that = this;
				uni.request({
					header: {
						"Content-Type": "application/json", //自定义请求头信息
					},
					url: getApp().globalData.url + "user/myInfo/" + that.mainid, //仅为示例，并非真实接口地址。
					method: "POST",
					data: {
						id: that.mainid,
					},
					success: (res) => {
						//	uni.hideLoading(); //关闭加载动画
						// console.log(res);
						if (res.data.status == "200") {
							that.level = res.data.data.level;
							that.utype = res.data.data.type;
							that.shoplist();
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error);
					},
				});
			},
			daohang() {
				uni.request({
					header: {
						"Content-Type": "application/json", //自定义请求头信息
					},
					url: getApp().globalData.url + "mch/getSubNavList", //仅为示例，并非真实接口地址。
					method: "POST",
					success: (res) => {
						this.checks = true;
						// console.log(res);
						if (res.data.status == "200") {
							this.navlist = res.data.data;
							for (var i = 1; i < res.data.data.length; i++) {
								if (this.subNav == res.data.data[i].subNav) {
									this.fenl = i;
								}
							}
						} else {}
					},
					fail: (error) => {
						// console.log(error)
					},
				});
			},
			
			//跳转商家详情页面
			shopDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/detail?id=' + item.mchId + '&distance=' + item.distance
				})
			},
			
			
		},
	};
</script>

<style>
	/* 广告 */
	.shai {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		position: fixed;
		top: 20vw;
		background: #fff;
		box-shadow: 0px 2px 2px #eee;
		z-index: 999;
		/* margin-top: 10vw; */
	}

	.shai_li {
		width: 33.33%;
		height: 6vw;
		line-height: 6vw;
		margin: 2vw 0;
		padding: 0 1vw;
		display: block;
		float: left;
		text-align: center;
		border-right: 1px solid #F2F2F2;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.shai_li:last-child {
		border: none;
	}

	.float {
		width: 100%;
		height: auto;
		position: fixed;
		top: 32vw;
		left: 0;
		background: #fff;
		padding: 4vw;
		z-index: 999;
		box-shadow: 0px 2px 2px #eee;
	}

	.float_li {
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		text-align: center;
		float: left;
		border-top: 1px solid #F2F2F2;
	}

	.li_a {
		color: #F1C75E;
	}

	.float_nav {
		width: 100%;
		height: auto;
		position: fixed;
		top: 30vw;
		left: 0;
		background: #fff;
		padding: 4vw;
		z-index: 999;
		box-shadow: 0px 2px 2px #eee;
	}

	.float_nav_li {
		width: 18%;
		height: 10vw;
		line-height: 10vw;
		text-align: center;
		float: left;
		margin: 1vw 1%;
		overflow: hidden;
	}

	.li_act {
		color: #fff;
		background: #F1C75E;
		border-radius: 2vw;
	}

	.top_inp {
		width: 80vw;
		height: 8vw;
		float: left;
		border: 1px solid #aaa;
		border-radius: 2vw;
		margin-left: 5vw;
		margin-top: 2vw;
		padding: 0 2vw;
		background: url(../../static/img/search.png) no-repeat;
		background-size: 4vw;
		background-position: 2vw;
		padding-left: 8vw;
	}

	.top_kefu {
		width: 8vw;
		height: 8vw;
		float: right;
		padding: 1vw;
		margin-top: 2vw;
		margin-right: 4vw;
	}

	.top_kefu image {
		width: 100%;
	}


	.top_bg {
		position: absolute;
		top: -10vw;
		left: 0vw;
		width: 100vw;
		height: 60vw;
		display: block;
		float: left;
		background: #f4bf46;
		/* margin-left: -25vw; */
		border-radius: 0 0 20vw 20vw;
	}

	.ind_nav text {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		text-align: center;
	}

	.top {
		width: 100%;
		height: 20vw;
		position: fixed;
		top: 0vw;
		left: 0;
		padding-top: 8vw;
		background: #fff;
		z-index: 999;
	}

	.top_adr {
		width: auto;
		height: 12vw;
		float: left;
		position: absolute;
		top: 8vw;
		left: 0;
		padding-left: 5vw;
	}

	.top_adr text {
		width: 17vw;
		height: 12vw;
		position: relative;
		line-height: 12vw;
		float: left;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	/* 	.top_adr text::after {
		content: "...";
		position: absolute;
		color: #000;
		right: 0;
		top: 0;
	} */

	.top_adr image {
		width: 4vw;
		margin-top: 4vw;
		float: left;
		margin-right: 2vw;
	}

	.bai {
		width: 12vw;
		height: auto;
		float: left;
	}

	.top_tit {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		text-align: center;
		float: left;
	}

	.ind_mingxi_li {
		width: 100%;
		height: auto;
		float: left;
		background: #fff;
	}

	.ind_mingxi_i {
		width: 100%;
		height: 100vw;
		height: auto;
		float: left;
	}

	.shop {
		width: 100%;
		height: auto;
		float: left;
		margin-bottom: 20vw;
	}

	.shop_tit {
		width: 100%;
		height: auto;
		padding: 0 5vw;
	}

	.msg_list_img {
		width: 16vw;
		height: 16vw;
		display: block;
		float: left;
		overflow: hidden;
		background: #000;
		border-radius: 2vw;
	}

	.msg_list_img image {
		width: 100%;
		height: 100%;
		display: block;
		float: left;
	}

	.msg_list {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		box-shadow: 0px 0px 1vw #f2f2f2;
		padding: 3vw;
		border-radius: 2vw;
		border: 1px solid #f2f2f2;
		margin: 0 5%;
		margin-top: 4vw;
		background: #fff;
	}

	.msg_list_tit {
		width: 77%;
		margin-left: 1%;
		height: auto;
		display: block;
		float: left;
		/* padding: 2vw 0; */
		line-height: 8vw;
		margin-left: 2%;
	}

	.msg_list_text {
		width: 80%;
		height: 6vw;
		float: left;
		margin: 1vw;
		line-height: 6vw;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.msg_list_le {
		width: 50%;
		height: auto;
		display: block;
		float: left;
		line-height: 10vw;
	}

	.msg_list_ri {
		width: 50%;
		height: auto;
		display: block;
		float: left;
		text-align: right;
		line-height: 10vw;
	}

	.msa_list_tit_main {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		justify-content: space-between;
	}

	.msa_list_tit_main text {
		width: auto;
		display: block;
		float: right;
	}

	.bai {
		width: 100%;
		height: 12vw;
		display: block;
		float: left;
	}

	.msg_but {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		padding: 0 2vw;
		background: #f1c75e;
		display: block;
		float: left;
		border-radius: 2vw;
		margin-right: 2vw;
		margin-bottom: 2vw;
	}

	.msg_but1 {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		text-decoration: underline;
		/* padding: 0 3vw; */
		/* background: #8ecce5; */
		display: block;
		float: left;
		/* border-radius: 2vw; */
		margin-right: 2vw;
		margin-bottom: 2vw;
	}

	.msg_list_li {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.msg_list_tab {
		/* border: 1px solid #f1c75e; */
		width: auto;
		display: block;
		float: left;
		/* padding: 0 2vw; */
		/* border-radius: 2vw; */
		margin-right: 2vw;
		height: auto;
		line-height: 5vw;
		max-height: 10vw;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.shop_tit_img {
		width: 7vw;
		height: 7vw;
		margin-right: 3vw;
	}

	.msg_img {
		width: 5vw;
		height: auto;
		margin-left: 4vw;
		margin-top: 2vw;
	}

	.zanwu {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
</style>
